This PR adds a detailed interactive architecture diagram using Mermaid.js to visualize the complete system architecture of the Azure Search OpenAI demo application.

Changes Made

New Documentation

• Created docs/architecture.md - Comprehensive architecture documentation featuring:
  • Interactive Mermaid.js diagram showing all system components
  • Color-coded component categories (UI, application, Azure services, storage, optional features, security)
  • Detailed explanations of each architectural layer
  • Complete RAG (Retrieval Augmented Generation) data flow documentation
  • Documentation of optional features and deployment options

Updated References

• Updated README.md - Added reference to the detailed architecture diagram alongside the existing static image
• Updated docs/README.md - Added architecture overview to the documentation index

Architecture Diagram Features

The new Mermaid.js diagram illustrates:

• Frontend Layer: React/TypeScript web application with Chat and Ask interfaces
• Backend Layer: Python/Quart API with different RAG approaches (Chat, Ask, Vision)
• Azure Services: Complete integration showing OpenAI, AI Search, Storage, Document Intelligence, Container Apps, etc.
• Optional Components: Authentication (Entra ID), chat history (Cosmos DB), speech services, vision capabilities
• Security Features: Access control, security filters, and private endpoints
• Data Flow: Complete user journey from document ingestion to AI-powered responses with citations
• Deployment Options: Both Container Apps (default) and App Service hosting

Benefits

• Interactive Visualization: Unlike static images, the Mermaid diagram can be viewed, copied, and modified
• Comprehensive Coverage: Shows both required and optional components with clear visual distinctions
• Educational Value: Helps developers understand the complete RAG architecture and data flow
• Maintainability: Diagram source is version-controlled and can be easily updated as the architecture evolves

The diagram complements the existing static architecture image by providing an interactive, detailed view of all system components and their relationships.

Fixes #2554.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.